<template>

  <div class="layui-layout layui-layout-admin">
    <div class="adminnav1">
      <Pagetop></Pagetop>
    </div>
    <div class="adminnav2">
      <Secondnav urlname="index"></Secondnav>
    </div>

<div class="layui-body kedou-admin imgs" id="LAY_app_body" style="top:100px;background-size:cover;">
      
      </div>        

    <!-- 主体内容 -->
    <!-- <div class="layui-body kedou-admin" id="LAY_app_body">
      <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
          <div class="layui-col-md8">
            <div class="layui-card">
              <div class="layui-card-header">待办事项</div>
              <div class="layui-card-body">

                <div class="layui-carousel layadmin-carousel layadmin-backlog">
                  <div>
                    <ul class="layui-row layui-col-space10">
                      <li class="layui-col-xs6">
                        <a lay-href="app/content/comment.html" class="layadmin-backlog-body">
                          <h3>会员数</h3>
                          <p><cite>100</cite></p>
                        </a>
                      </li>
                      <li class="layui-col-xs6">
                        <a lay-href="app/forum/list.html" class="layadmin-backlog-body">
                          <h3>待退款单</h3>
                          <p><cite>2</cite></p>
                        </a>
                      </li>
                      <li class="layui-col-xs6">
                        <a lay-href="template/goodslist.html" class="layadmin-backlog-body">
                          <h3>待发货单</h3>
                          <p><cite>5</cite></p>
                        </a>
                      </li>
                      <li class="layui-col-xs6">
                        <a href="javascript:;" class="layadmin-backlog-body">
                          <h3>待提货单</h3>
                          <p><cite>100</cite></p>
                        </a>
                      </li>
                    </ul>

                  </div>
                </div>
              </div>
            </div>

            <div class="layui-card">
              <div class="layui-card-header">数据概览</div>
              <div class="layui-card-body">

                <div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade"
                  lay-filter="LAY-index-dataview" id="LAY-index-dataview">
                  <div carousel-item>
                    <div id="tb01"></div>
                    <div id="tb02"></div>
                    <div id="tb03"></div>
                  </div>
                </div>

              </div>
            </div>

          </div>

          　 <div class="layui-col-md4">
            <div class="layui-card">
              <div class="layui-card-header">系统公告</div>
              <div class="layui-card-body" style="height:185px;overflow:hidden;overflow-y:scroll">
                <table class="layui-table">
                  <colgroup>
                    <col width="70%">
                    <col>
                  </colgroup>
                  <thead>
                    <tr>
                      <th>内容</th>
                      <th>时间</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>端小程序客服消息限开端程序客服消息权限开权限开</td>
                      <td>2016-11-29</td>
                    </tr>
                    <tr>
                      <td>端小程序客服消息权限开</td>
                      <td>2016-11-29</td>
                    </tr>
                    <tr>
                      <td>端小程序客服消息权限开</td>
                      <td>2016-11-29</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>

            <div class="layui-card">
              <div class="layui-card-header">优惠券数据</div>
              <div class="layui-card-body layadmin-takerates">
                <div class="layui-carousel layadmin-carousel layadmin-backlog" style="height:132px!important;">
                  <div>
                    <ul class="layui-row layui-col-space10">
                      <li class="layui-col-xs6">
                        <a class="layadmin-backlog-body">
                          <h3>领取优惠券(张)</h3>
                          <p><cite>100</cite></p>
                        </a>
                      </li>
                      <li class="layui-col-xs6">
                        <a class="layadmin-backlog-body">
                          <h3>核销优惠券(张)</h3>
                          <p><cite>2</cite></p>
                        </a>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
            <div class="layui-card">
              <div class="layui-card-header">优惠券转化</div>
              <div class="layui-card-body layadmin-takerates">
                <div class="layui-progress" lay-showPercent="yes">
                  <h3>转化率（日同比 28%）</h3>
                  <div class="layui-progress-bar" lay-percent="65%"></div>
                </div>
                <div class="layui-progress" lay-showPercent="yes">
                  <h3>发券率（日同比 11% ）</h3>
                  <div class="layui-progress-bar layui-bg-red" lay-percent="32%"></div>
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>
      <div class="layui-fluid" style="margin-top:-15px;">
        <div class="layui-card">
          <div class="layui-card-header">排行榜</div>
          <div class="layui-card-body">
            <table class="layui-table">
              <colgroup>
                <col>
                <col>
                <col>
                <col>
                <col>
                <col>
                <col>
                <col>
              </colgroup>
              <thead>
                <tr>
                  <th>排名</th>
                  <th>门店名称</th>
                  <th>销售总额</th>
                  <th>用券销售额</th>
                  <th>核销优惠券张数</th>
                  <th>实付单数</th>
                  <th>新增客户数</th>
                  <th>新增顾问数</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>1</td>
                  <td>迪宝大厦门店</td>
                  <td>15000</td>
                  <td>2000</td>
                  <td>100</td>
                  <td>90</td>
                  <td>80</td>
                  <td>50</td>
                </tr>
                <tr>
                  <td>2</td>
                  <td>蝌蚪社群门店</td>
                  <td>10000</td>
                  <td>2000</td>
                  <td>100</td>
                  <td>90</td>
                  <td>92</td>
                  <td>50</td>
                </tr>
                <tr>
                  <td>1</td>
                  <td>住家黄龙门店</td>
                  <td>9000</td>
                  <td>2000</td>
                  <td>100</td>
                  <td>90</td>
                  <td>80</td>
                  <td>59</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div> -->
  </div>

</template>
<script>	
import echarts from 'echarts'
import Pagetop from './common/pagetop.vue'
import Secondnav from './common/secondnav.vue'

export default {
  name: 'index',
  components: { Pagetop, Secondnav },
  data () {
    return {
      itemData: '',
      type: localStorage.getItem("type")
    }
  },
  mounted () {
    var _this = this;
    layui.use(['element', 'carousel'], function () {
      var element = layui.element;
      var carousel = layui.carousel;
      //建造实例
      carousel.render({
        elem: '#LAY-index-dataview'
        , width: '100%' //设置容器宽度
        , arrow: 'none' //始终显示箭头
        , interval: '20000'
      });
      carousel.on('change(LAY-index-dataview)', function (obj) { //test1来源于对应HTML容器的 lay-filter="test1" 属性值

        _this.gettb(obj.index);
      });
      _this.gettb(0);
    });

    this.getdate();

  },
  methods: {
    gettb: function (index) {
      var n = [{
        title: {
          text: "销售数据",
          x: "left",
          textStyle: {
            fontSize: 14
          }
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: ["销售额", "客单价"]
        },
        xAxis: [{
          type: "category",
          boundaryGap: !1,
          data: ["06:00", "06:30", "07:00", "07:30", "08:00", "08:30", "09:00", "09:30", "10:00", "11:30", "12:00", "12:30", "13:00", "13:30", "14:00", "14:30", "15:00", "15:30", "16:00", "16:30", "17:00", "17:30", "18:00", "18:30", "19:00", "19:30", "20:00", "20:30", "21:00", "21:30", "22:00", "22:30", "23:00", "23:30"]
        }],
        yAxis: [{
          type: "value"
        }],
        series: [{
          name: "销售额",
          type: "line",
          smooth: !0,
          itemStyle: {
            normal: {
              areaStyle: {
                type: "default"
              }
            }
          },
          data: [111, 222, 333, 444, 555, 666, 3333, 33333, 55555, 66666, 33333, 3333, 6666, 11888, 26666, 38888, 56666, 42222, 39999, 28888, 17777, 9666, 6555, 5555, 3333, 2222, 3111, 6999, 5888, 2777, 1666, 999, 888, 777]
        }, {
          name: "客单价",
          type: "line",
          smooth: !0,
          itemStyle: {
            normal: {
              areaStyle: {
                type: "default"
              }
            }
          },
          data: [11, 22, 33, 44, 55, 66, 333, 3333, 5555, 12666, 3333, 333, 666, 1188, 2666, 3888, 6666, 4222, 3999, 2888, 1777, 966, 655, 555, 333, 222, 311, 699, 588, 277, 166, 99, 88, 77]
        }]
      }, {
        title: {
          text: "门店数据",
          x: "center",
          textStyle: {
            fontSize: 14
          }
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          x: "left",
          data: ["推广人员", "店员", "顾问", "门店", "离职店员"]
        },
        series: [{
          name: "ww",
          type: "pie",
          radius: "55%",
          center: ["50%", "50%"],
          data: [{
            value: 9052,
            name: "推广人员"
          }, {
            value: 1610,
            name: "店员"
          }, {
            value: 3200,
            name: "顾问"
          }, {
            value: 535,
            name: "门店"
          }, {
            value: 1700,
            name: "离职店员"
          }]
        }]
      }, {
        title: {
          text: "新增客户数",
          x: "center",
          textStyle: {
            fontSize: 14
          }
        },
        tooltip: {
          trigger: "axis",
          formatter: "{b}<br>d2{c}"
        },
        xAxis: [{
          type: "category",
          data: ["06:00", "06:30", "07:00", "07:30", "08:00", "08:30", "09:00", "09:30", "10:00", "11:30", "12:00", "12:30", "13:00", "13:30", "14:00", "14:30", "15:00", "15:30", "16:00", "16:30", "17:00", "17:30", "18:00", "18:30", "19:00", "19:30", "20:00", "20:30", "21:00", "21:30", "22:00", "22:30", "23:00", "23:30"]
        }],
        yAxis: [{
          type: "value"
        }],
        series: [{
          type: "line",
          data: [200, 300, 400, 610, 150, 270, 380, 200, 300, 400, 610, 150, 270, 380]
        }]
      }]
      var option = n[index];
      var i = index + 1;
      var id = 'tb0' + i;
      let myChart = echarts.init(document.getElementById(id))
      myChart.setOption(option);
    },
    timeDate: function (time, s) {
      return FormatDate(time, s);
    },
    getdate: function () {

    },
    screens: function () {
      return screen();
    },

  },
  updated: function () {
    this.isShow = true;
    layui.use('form', function () {
      var form = layui.form;
      form.render();

    });

  },
}
</script>
<style>
.imgs{
    background-position:50% 50%;
    background:url("../assets/index.png") no-repeat;
   background-size:cover;
}
</style>
